<extend name="Base/base" />
<block name='head'> 
    <link rel="stylesheet" type="text/css" href="/Public/Index/css/plan_css.css">
    <link rel="stylesheet" type="text/css" href="/Public/Index/css/plan_demo.css"/>
    <title>工作计划</title>
</block>
<block name="content" > 
    <div class="banner_top">
        <div class="banner_work">
            <div class="Unknotted_left">
                <a href="{:U('Plan/lists',array('type'=>0))}">
                    <h2>{$planCount|default=0}</h2>
                    <p>未办结工作</p>
                    <span>点击查看</span>
                </a>
            </div>
            <div class="Completed_rigth">
                <a href="{:U('Plan/lists',array('type'=>1))}">
                    <h2>{$finishCount|default=0}</h2>
                    <p>已办结工作</p>
                    <span>点击查看</span>
                </a>
            </div>
        </div>
    </div>
    <!--top结束-->
    <div class="user_lists">
        <h3>常用功能</h3>
        <ul>
            <li class="border"><a href="{:U('Plan/addPlan')}"><P><img src="/Public/Index/img/plan_001.png"  /><span>新建计划</span></P></a></li>
            <li class="border"><a href="{:U('Plan/search')}"><P><img src="/Public/Index/img/plan_002.png" /><span>计划查询</span></P></a></li>
            <li class="border">
                <a class="history pointer">
                    <P>
                        <img src="/Public/Index/img/plan_003.png" />
                        <span>历史计划</span>
                    </P>
                </a>
            </li>
        </ul>
    </div>
    
    <if condition="$userPriv != 'deptLeader'">
    <div class="plan_lists" style="height:165px">
        <notempty name='userPercents'>
            <ul style="padding-bottom: 0">
                <foreach name="userPercents" item='pro' key="key">
                    <li>
                        <label>{$pro.name}</label>
                        <span class="num-bj">
                            <if condition="$pro['width'] neq '0%'">
                                <span class="{$pro['name'] ==  '年度计划'? 'num' : 'num2'}" style='width:{$pro.total}'>{$pro.total}</span>
                            </if>
                        </span>
                    </li>
                </foreach>
            </ul>
        </notempty>
    </div>
        </if>
        
    <if condition="$userPriv == 'deptLeader'">
        <div class="plan_lists" id="echartsMain">

        </div>
        <input type="hidden" id="deptEcharts" value="{:U('getDeptPlanPercent')}">
    </if>

    <if condition="$userPriv == 'comLeader'">
        <div class="user_lists led_lists">
            <notempty name='leaderProcessDetail'>
                <h3>各部门工作总进度</h3>
                <div class="plan_cmp">
                <ul>
                    <foreach name="leaderProcessDetail" item='pro' key="key">
                        <li class="border" style="padding: 3% 0"><a href="{:U('Plan/addPlan')}"><P>{$pro.deptName}<span style="font-size:1rem;color:#437dba">{$pro.total}</span></P></a></li>
                    </foreach>
                </ul>
                </div>
            </notempty>
        </div>
    </if>

    <div class="plan_bottom">
        <ul>
            <li><a href="{:U('Plan/attentionPlan')}"><span class="plan_icon">&#xe624;</span>我的关注({$followCount|default=0})</a></li>
            <li><a href="{:U('Plan/allPlans')}"><span class="plan_icon">&#xe65b;</span>我的计划({$allCount|default=0})</a></li>
        </ul>
    </div>
</block>
<block name="script">
    <script type="text/javascript" src="/Public/Index/js/planNew.js"></script>
    <script type="text/javascript" src="/Public/Index/js/layer.js"></script>
    <script type="text/javascript" src="/Public/static/echarts/echarts.common.min.js"></script>
    <script type="text/javascript">
        $(initAllPlan());
        $(function () {
            if($('#deptEcharts').val()){
            $.get($('#deptEcharts').val(), function (res) {
                console.log(res);
                param = res;
                var myChart = echarts.init(document.getElementById('echartsMain'));
                var option = {
                    backgroundColor:'#fff', //全局背景色
                    tooltip: {
                        trigger: 'item',
                        axisPointer: {  // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'       // 默认为直线，可选为：'line' | 'shadow'
                        },
                        formatter: function (params, ticket, callback) {
                            //console.log(params)
                            var id = params.seriesIndex;
                            var type;
                            if(id == 0){
                                type = '个人进度';
                            }else{
                                type = '部门进度';
                            }
                            var html = '<p>'+params.name+'</p>';
                            html += '<p>'+ type + '：' + params.value + '%</p>';
                            return html;
                        },
                    },
                    legend: {
                        left:'right',
                        top:'6%',   //图例组件顶部的距离
                        bottom:'50px',
                        data: ['个人进度','部门进度'],
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true,
                    },
                    xAxis: [{
                            type: 'category',
                            data: res.type
                        }],
                    yAxis: [{type: 'value'}],
                    series: [
                        {
                            name: res.name[0],
                            type: 'bar',
                            barWidth: 18,
                            data: res.userNumber,
                            label:{
                              normal:{
                                  show:true,
                                  position:'top',
                                  formatter:'{c}%'
                              }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#ffa060'
                                }
                            },
                        },
                        {
                            name: res.name[1],
                            type: 'bar',
                            barWidth: 18,
                            data: res.deptNumber,
                            label:{
                              normal:{
                                  show:true,
                                  position:'top',
                                  formatter:'{c}%'
                              }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#5FC6C6'
                                }
                            },
                        }
                    ]
                };
                myChart.setOption(option);
            })
        }
        })
    </script>
</block>
